<template>
  <div class="column" ref="column" :style="{height:centerHeight + 'px'}">
    <div class="panel bar" ref="panel1" :style="{height:panelHeight+'px', background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <h2>区县排名</h2>
      <echart1  class="chart" ></echart1>
      <div class="panel-footer"></div>
      <div class="mask"></div>
    </div>
    <div class="panel line" ref="panel2" :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <h2>企业排名</h2>
      <echart2 class="chart"></echart2>
      <div class="panel-footer"></div>
    </div>
    <div class="panel line" ref="panel3" :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <h2>企业总览</h2>
      <echart3 class="chart"></echart3>
      <div class="panel-footer"></div>
    </div>
    <div class="panel pie" ref="panel4" :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <h2>人才总览</h2>
      <echart4 class="chart"></echart4>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>

<script>
import echart1 from '../echarts/echart1'
import echart2 from '../echarts/echart2'
import echart3 from '../echarts/echart3'
import echart4 from '../echarts/echart4'
import { getDicts } from '../../api/system/dict/data'
import { screenWidth } from '@/utils/utils'

export default {
  name: 'left_part1',
  props:{
    centerHeight: {
      type: Number,
      default: 0
    },
  },
  components:{
    echart1,
    echart2,
    echart3,
    echart4
  },
  data(){
    return {
      panel_img:require('../../assets/images/line(1).png'),
      //块高度
      panelHeight:0,
    }
  },
  created() {
    this.panelHeight =  this.centerHeight / 4
  },
  mounted() {

  },
  methods:{
    setWidth(width,height){
      this.$refs['column'].style.width = (screenWidth() - width) / 2 + 'px'
      this.$refs.panel1.style.height = height / 4 + 'px'
      this.$refs.panel2.style.height = height / 4 + 'px'
      this.$refs.panel3.style.height = height / 4 + 'px'
      this.$refs.panel4.style.height = height / 4 + 'px'
    },
  }

}
</script>

<style scoped lang="scss">
@import './css/left_part';
</style>
